<template>
  <el-container>
    <el-header>
      <h2>项目统计</h2>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="6">
          <el-card>
            <h3>当前项目数量</h3>
            <p>{{ countProjectNum }}</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <h3>我的项目数量</h3>
            <p>{{ countProjectByUserId }}</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <h3>我的代办任务数量</h3>
            <p>{{ countNotOkTask }}</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <h3>我已经完成的任务数量</h3>
            <p>{{ countOkTask }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import axios from 'axios';

// 创建响应式数据
const countProjectNum = ref(0);
const countProjectByUserId = ref(0);
const countNotOkTask = ref(0);
const countOkTask = ref(0);

// 定义用户 ID
let currUserId = '';

const fetchProjectCounts = async () => {
  try {
    if (!currUserId) {
      throw new Error('用户 ID 不存在');
    }
    const baseUrl = "http://localhost:8080";
    // 发起请求并获取响应
    const response = await axios.get(baseUrl+ '/project/count', {
      params: { userId: currUserId } // 将 userId 作为查询参数
    });

    // 检查响应状态码
    if (response.data.code === 200) {
      // 解构数据
      const [projectNum, projectByUserId, notOkTask, okTask] = response.data.data;
      // 更新响应式数据
      countProjectNum.value = projectNum;
      countProjectByUserId.value = projectByUserId;
      countNotOkTask.value = notOkTask;
      countOkTask.value = okTask;
    } else {
      // 处理错误情况
      console.error('Error:', response.data.msg);
    }
  } catch (error) {
    // 处理请求失败
    console.error('请求失败:', error);
  }
};

// 在组件挂载之前调用
onBeforeMount(() => {
  // 获取用户 ID
  currUserId = localStorage.getItem('userId');
  console.log('Current User ID:', currUserId);

  // 发起数据请求
  fetchProjectCounts();
});
</script>

<style scoped>
/* 添加样式 */
</style>
